<div id="loginDiv">
    <section class="material-half-bg">
        <div class="cover"></div>
    </section>
    <section class="login-content">
        <div class="logo">
            <h1>登录</h1>
        </div>
        <div class="login-box">
            <form class="login-form" action="javascript:void(0);">
                <h3 class="login-head">
                    <i class="fa fa-lg fa-fw fa-user"></i>
                    登录
                </h3>
                <div class="form-group">
                    <label class="control-label">账号</label>
                    <input class="form-control" type="text" placeholder="账号" autofocus v-model:value="user.userName">
                </div>
                <div class="form-group">
                    <label class="control-label">密码</label>
                    <input class="form-control" type="password" placeholder="密码" v-model:value="user.password">
                </div>
                <div class="form-group">
                    <div class="utility">
                        <div class="animated-checkbox">
                            <label>
                                <input type="checkbox" v-model:value="user.rememberMe">
                                <span class="label-text">记住我</span>
                            </label>
                        </div>
                        <p class="semibold-text mb-2"><a href="/register" data-toggle="flip">注册</a></p>
                    </div>
                </div>
                <div class="form-group btn-container">
                    <button class="btn btn-primary btn-block" onclick="login()"><i
                            class="fa fa-sign-in fa-lg fa-fw"></i>登录
                    </button>
                </div>
            </form>
        </div>
    </section>
</div>
<script>
    var loginVue = new Vue({
        el: "#loginDiv",
        data: {
            user: {
                userName: "",
                password: "",
                rememberMe: ""
            }
        },
        methods: {
            login: function () {
                var self = this;
                var user = self.user;
                if (user.userName === "" || user.password === "") {
                    layer.alert("不能为空", {icon: 0});
                } else {
                    $.ajax({
                        url: "/api/login",
                        type: "post",
                        contentType: "application/json",
                        data: JSON.stringify(user),
                        success: function (rs) {
                            if (rs.status === 200) {
                                console.log(rs.data)
                                window.location.href = "/common/main";
                            } else {
                                layer.alert(rs.message, {icon: 0});
                            }
                        },
                        error: function (rs) {
                            layer.alert(rs.responseText, {icon: 0});
                        }
                    });
                }
            }
        },
        created: function () {
            window.login = this.login;
        },
        mounted: function () {

        }
    })
</script>

